<template>
	<div class="notify" v-if="msg" :style="{color:color,backgroundColor:bgColor}">
		{{msg}}
	</div>
</template>
<style scoped="scoped">
	.notify{
		height: 44px;
		line-height: 44px;
		position: fixed;
		width: 100%;
		left:0;
		top:0;
		text-align: center;
	}
</style>
<script>
	export default{
		data(){
			return {
				// 通知的文本
				msg:"",
				// 文本颜色
				color:"#fff",
				// 背景颜色
				bgColor:"#090"
			}
		},
		methods:{
			// 显示通知（自定义背景颜色，和文本）
			show(msg,bgColor="#090",color="#fff"){
				this.msg = msg;
				this.bgColor = bgColor;
				this.color = color;
				// 2秒后隐藏通知
				setTimeout(()=>{
					this.hide();
				},2000)
			},
			// 隐藏通知
			hide(){
				this.msg = "";
			},
			// 成功
			success(msg){				
				this.show(msg,"#090")
			},
			// 失败
			danger(msg){
				this.show(msg,"#ff5500")
			},
			// 警告
			warning(msg){
				this.show(msg,"#ffd606")
			}
		}
	}
</script>

<style>
</style>
